<template>
  <div class="nav-recommends">
    <!-- 遍历多张图片 -->
    <div
      v-for="item in recommends"
      :key="item.index"
      class="nav-recommends-item"
    >
      <a :href="item.link">
        <img :src="item.image" alt="图片" />
        <div>{{ item.title }}</div>
      </a>
    </div>
  </div>
</template>

<script>
export default {
  name: "RecommendView",
  props: {
    recommends: {
      type: Array,
      default() {
        return [];
      },
    },
  },
  data() {
    return {};
  },
};
</script>
<style scoped>
/* 设置弹性布局,父容器 */
.nav-recommends {
  display: flex; /* 弹性布局 */
  height: 100px;
  flex-direction: row; /* 对齐方法 */
  text-align: center; /* 文本居中对齐2 */
  padding: 10px 10px; /* 设置内边距 */
  border-bottom: 8px solid #eee; /* 设置底部粗线效果 */
}
.nav-recommends-item {
  flex: 1; /* 均等分 */
}
/* 设置img样式 */
.nav-recommends-item img {
  width: 80%;
  height: 80%;
  vertical-align: middle;
}
/* 设置div的文本样式，并且于img隔开距离 */
.nav-recommends-item div {
  text-align: center;
  padding-top: 10px;
}
</style>